<template>
  <div class="app1">
    <title1 tit="约看"></title1>
    <van-tabs v-model="active" line-width="50%" class="can1">
      <van-tab title="未完成预约"
        ><div class="div1" v-for="(item, index) in house" :key="index">
          <img :src="imglist[item.imgUrl]" alt="" />
          <ul class="ul1">
            <li>{{ item.areaName }}</li>
            <li>{{ item.description }}</li>
            <li v-if="item.floor == 0">一室一厅</li>
            <li v-if="item.floor == 1">两室一厅</li>
            <li v-if="item.floor == 2">三室两厅</li>
            <li v-if="item.floor == 3">三室一厅</li>
            <li v-if="item.floor == 4">四室一厅</li>
            <li>{{ item.areaId }}</li>
            <li class="li3">整租</li>
          </ul>
          <div class="jiage">{{ item.price }}/元</div>
        </div>
      </van-tab>
      <van-tab title="已完成预约"
        ><div class="div1" v-for="(item, index) in house" :key="index">
          <img :src="imglist[item.imgUrl]" alt="" />

          <ul class="ul1">
            <li>{{ item.areaName }}</li>
            <li>{{ item.description }}</li>
            <li v-if="item.floor == 0">一室一厅</li>
            <li v-if="item.floor == 1">两室一厅</li>
            <li v-if="item.floor == 2">三室两厅</li>
            <li v-if="item.floor == 3">三室一厅</li>
            <li v-if="item.floor == 4">四室一厅</li>
            <li>{{ item.areaId }}</li>
            <li class="li3">整租</li>
          </ul>
          <div class="jiage">{{ item.price }}/元</div>
        </div></van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
import title1 from "../../../components/tit.vue";
import { getHouse } from "../../../api/index";
export default {
  data() {
    return {
      active: 2,
      house: [],
      imglist: [
        //    动态绑定src需要用require
        require("../../../assets/image/banner1(1).png"),
        require("../../../assets/image/banner2.png"),
        require("../../../assets/image/banner3.png"),
        require("../../../assets/image/banner4.png"),
        require("../../../assets/image/banner5.png"),
        require("../../../assets/image/banner6.png"),
      ],
    };
  },
  components: {
    title1,
  },
  methods: {
    goback() {
      this.$router.replace({ name: "Mine" });
    },

    // //获取后台数据
    // getAllEmploy() {
    //   this.$store.dispatch('./')
    // }

    //初始化获取数据
    async getYuekan() {
      // let {data: { result },
      // meta: {status}} = await getHouse()
      // console.log(result);
      // if(status == 200) {
      //     this.house = result

      // }
      let {
        data: {
          data: { result },
        },
      } = await getHouse();
      console.log(result);
      this.house = result;
    },
  },
  //创建调用的方法
  created() {
    this.getYuekan();
  },
};
</script>

<style lang="less" scoped>
.app1 {
  width: 100%;
  height: 100%;
  background-color: #ebebeb;

  .div1 {
    background-color: #fff;
    height: 250px;
    margin: 20px;
    border-radius: 5px;
    img {
      float: left;
      width: 290px;
      height: 196px;
      margin: 20px;
    }
    .ul1 {
      float: left;
      margin: 20px;

      li {
        margin-top: 10px;
        font-size: 11px;
      }
      .li3 {
        width: 72px;
        height: 32px;
        border: 1px solid #618698;
        text-align: center;
        border-radius: 8px;
        font-size: 11px;
      }
    }
    .jiage {
      float: right;
      margin-top: 180px;

      font-size: 26px;
      margin-right: 20px;
      font-size: 20px;
    }
  }
}
</style>
